export default {
    name:"SelectEditText",
    props: {
        modelValue: String,
        disabled: Boolean,
        typeOf: String,
        multi:Boolean,
        title:String,
        separator:{
            type:String,
            default:"\n"
        },
        clearable:{
            type:Boolean,
            default:true
        },
        allowRepeat:{
            type:Boolean,
            default:true
        },
        cfg:Object,
        type:{
            type:String,
            default:"textarea"
        }
    },
    events:["update:modelValue","change"],
    template: `
    <el-input v-if="type=='text'" v-model="txt" ref="txtEl" @blur="doChange1" :disabled="disabled" v-bind="$attrs" :suffix-icon="List">
        <template #suffix>
            <el-icon v-if="typeOf && !disabled" color="#1d6bb9" :size="20" @click="doSelect"><List /></el-icon>
        </template>
    </el-input>
    <div v-else>
        <el-icon v-if="typeOf && !disabled" style="font-size: 20px;position: absolute;--color: blue;top: 2px;z-index: 1;right: 2px;" color="#1d6bb9" :size="20" @click="doSelect"><Fold /></el-icon>
        <el-input v-model="txt" ref="txtEl"  @blur="doChange1" :disabled="disabled" show-word-limit :type="type" v-bind="$attrs" />
    </div>`,
    data(){
        return {
            txt:""
        }
    },
    created(){
        this.txt = this.modelValue;
    },
    methods: {
        doChange1(e){
            if(!this.disabled && this.txt!=this.modelValue){
                this.$emit("update:modelValue", this.txt);
                this.$emit("change", this.txt);
            }
        },
        doSelect() {
            let cfg = {
                tbname: "Form2_81",
                clearable: this.clearable,
                fields:"Text2,Text3",
                excludeSearch: "Text1Eq",
                allowAdd:true,
                search: {
                    _Text1ReadOnly:true,
                    Text1: this.typeOf,
                    Text1Eq: this.typeOf
                },
                ...this.cfg
            }
            if(this.title){
                cfg.title = this.title;
            }
            $server.dlg.select(cfg, this.multi).then(res => {
                if (res.length == 0) {
                    this.txt = "";
                    return;
                }

                if(this.type=="text"){
                    //单行文本时直接替换
                    this.txt = res[0][this.cfg?.selectField || 'Text2'];
                    return;
                }

                let text = res.map(x => x[this.cfg?.selectField || 'Text2']).join(this.separator);
                let el = this.$refs.txtEl.textarea;
                if (!el.value) {
                    el.value = "";
                }
                el.focus();
                if (document.selection) {
                    let sel = document.selection.createRange();
                    sel.text = text;
                    sel.select();
                } else if (el.selectionStart || el.selectionStart == '0') {
                    var startPos = el.selectionStart;
                    var endPos = el.selectionEnd;
                    var restoreTop = el.scrollTop;
                    let t1 = el.value.substring(0, startPos);
                    let t2 = el.value.substring(endPos, el.value.length);
                    if(this.separator){
                        if(t1 && t1.length>0 && !t1.endsWith(this.separator)){
                            t1 = t1 + this.separator;
                        }
                        if(t1 && t2.length>0 && !t2.startsWith(this.separator)){
                            t2 = this.separator + t2;
                        }
                    }
                    
                    var txt = t1 + text + t2;
                    if(this.separator && !this.allowRepeat){
                        //过滤掉重复的选项
                        txt = Array.from(new Set(txt.split(this.separator))).join(this.separator);
                    }
                    el.value = txt;
                    if (restoreTop > 0) {
                        el.scrollTop = restoreTop;
                    }
                    el.focus();
                    el.selectionStart = startPos + text.length;
                    el.selectionEnd = startPos + text.length;
                } else {
                    el.value += text;
                    el.focus();
                }
                this.txt = el.value;
            });
        }
    },
    watch:{
        modelValue(newVal){
            this.txt = newVal;
        }
    }
};